<template>
  <div>
    <div class="font-semibold mb-5">租户</div>
    <div>
      <div
        v-for="item in customerList"
        :key="item.id"
        class="customer-item"
        :class="{ active: current === item.id }"
        @click="toggleUser(item)"
      >
        <div>{{ item.customerName }}</div>
        <div @click.stop>
          <el-dropdown>
            <i class="el-icon-more text-gray-600"></i>
            <el-dropdown-menu slot="dropdown" class="py-0">
              <a @click="editCustomer(item)">
                <el-dropdown-item>编辑</el-dropdown-item>
              </a>
              <el-popconfirm
                v-if="item.id !== rootId"
                title="确定删除吗？"
                @confirm="delCustomer(item)"
              >
                <a slot="reference"><el-dropdown-item>删除</el-dropdown-item></a>
              </el-popconfirm>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="add-btn" @click.stop="addCustomer">+新建租户</div>
    </div>

    <AddEditCustomerType ref="AddEditCustomer" @onRefresh="fetchData()" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AddEditCustomerType from './AddEditCustomerType.vue'
import { getCustomerTypeList, deleteCustomerType } from '@/api/customerType'
import { MutationsType } from '@/actions/customerType'
export default Vue.extend({
  components: { AddEditCustomerType },
  data() {
    return {
      rootId: '843801558032068610',
      customerList: [],
      current: -1,
      customerType: -1,
    }
  },
  watch: {
    current(val) {
      this.$store.commit(MutationsType.SET_CUSTOMER_TYPE, this.customerType)
      this.$store.commit(MutationsType.SET_CURRENT_CUSTOMER_ID, val)
    },
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // const rootMenu = await getRootMenu()
      this.customerList = await getCustomerTypeList()
    },
    toggleUser(item) {
      this.customerType = item.customerType
      this.current = item.id
      console.log(item)
    },
    editCustomer(item) {
      this.$refs.AddEditCustomer?.open(2, item.id)
      console.log(item)
    },
    delCustomer(item) {
      deleteCustomerType(item.id).then(() => {
        this.$message('删除成功')
      })
    },
    addCustomer() {
      this.$refs.AddEditCustomer?.open()
    },
  },
})
</script>
<style lang="scss" scoped>
.customer-item {
  @apply rounded-content-wrap
            text-sm
            py-3
            px-2
            hover:bg-[#0062ff] hover:bg-opacity-5
            flex
            items-center
            justify-between
            cursor-pointer;
}

.add-btn {
  @apply text-primary cursor-pointer py-3 px-2;
}

.active {
  @apply bg-[#0062ff] bg-opacity-5;
}
</style>
